<template>
    <div class="chat-room">
        <!-- 引入头部组件 -->
        <headers :head_title="head_title" />
        <div class="box">
            <!-- 显示银行卡图片 -->
            <div class="Bankcardimage">
                <img :src="images" alt="银行卡图片" />
            </div>
            <!-- 显示银行卡信息 -->
            <div class="BCI">
                <div class="BCIbox" style="display: flex;">
                    <div>真实姓名</div>
                    <div style="margin-left: 30px;">{{ data.name?data.name:'欧若拉' }}</div>
                </div>
                <div class="BCIbox" style="display: flex;">
                    <div>到账银行</div>
                    <div style="margin-left: 30px;">{{ data.bank }}</div>
                </div>
                <div class="BCIbox" style="display: flex;">
                    <div>银行账号</div>
                    <div style="line-height: 25px; margin-left: 30px;">{{ back_messages_list }}</div>
                </div>
            </div>
            <!-- 确认绑定按钮 -->
            <van-button @click="nextstep" class="next" type="primary">确认绑定</van-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import headers from '@/components/header.vue';
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import Tesseract from 'tesseract.js';
import moment from 'moment';

const router = useRouter();
const images = ref(localStorage.getItem('bank_image'));
const data = ref({
  name: localStorage.getItem('nickname'),
  bank: '中国银行',
  account: '识别错误'
});
const ocrResult = ref(''); // 用于存储识别出的数字
//把ocrResult中的字符串转为数组
const back_messages_list=ref(null);
const head_title = ref('银行卡信息');

onMounted(async () => {
  if (images.value) {
    // 将 Base64 字符串转换为 Blob（这里假设 images.value 是完整的 Base64 数据 URL）
    const base64Data = images.value.split(',')[1];
    const blob = await (await fetch(`data:${images.value.split(',')[0]};base64,${base64Data}`)).blob();

    // 使用 tesseract.js 进行 OCR 识别
    Tesseract.recognize(
      blob,
      'eng', // 可以根据需要更改语言，确保 tesseract.js 支持该语言包
      // {
      //   logger: m => console.log(m) // 可选的日志记录器，用于调试
      // }
    ).then(({ data: { text } }) => {
      // 从识别结果中提取数字
      const numbersOnly = text.replace(/\D/g, ''); // 使用正则表达式去除所有非数字字符
      ocrResult.value = numbersOnly; // 将提取出的数字存储在 ocrResult 中
      console.log(ocrResult.value);

      back_messagess()
    }).catch(err => {
      console.error('OCR 识别失败:', err);
      ocrResult.value = 'OCR 识别失败'; // 处理错误情况
    });
  } else {
    ocrResult.value = '没有可用的图片进行 OCR 识别';
  }


});
console.log(ocrResult.value);
// 获取前16位并存储

const back_messagess=()=>{
  const bank_message_card= ocrResult.value
 back_messages_list.value=bank_message_card.slice(0,15);// 截取前16位
console.log(back_messages_list);
localStorage.setItem('bank_ocrResult',  back_messages_list.value)
const banc_time=moment().format(' YYYY/mm/D/h:mm:ss');
localStorage.setItem('bank_time', banc_time);
console.log(banc_time);

}



const nextstep = () => {
  router.push('/userchild');
  localStorage.setItem('recognize', '已绑定');
};
</script>




<style scoped lang="scss">



.chat-room {
    background-color: rgb(242, 242, 242);
    /* padding-bottom: 5px; */
}

.box {
    width: 100%;
    height: 100%;
    background: red;
    background-color: #fff;
}

.Bankcardimage {
    width: 100%;
    height: 100%;
    margin-top: 0.5px; // 7px * 0.5

    /* border-radius: 10px; */

}

.Bankcardimage img {
    width: 90%; // 90% * 0.5
    height: 200px; // 400px * 0.5
    margin-top: 25px; // 50px * 0.5
    margin: 5 auto; // 10px * 0.5
    margin-left: 17.5px; // 35px * 0.5
}

.BCI {
    width: 90%; // 90% * 0.5
    /* background: red; */
    height: 140px; // 140px * 0.5
    margin-top: 25px; // 50px * 0.5
    margin: 10px auto; // 10px * 0.5
    margin-left: 17.5px; // 35px * 0.5
    border: 0.5px solid rgb(221, 221, 221); // 1px * 0.5
    border-radius: 5px; // 10px * 0.5
}

.BCIbox {
    font-size: 12px; // 24px * 0.5
    margin-top: 15px; // 15px * 0.5
    margin-left: 12.5px; // 25px * 0.5
    font-weight: bold;
}
.next {
    margin-top: 35px; // 70px * 0.5
    width: 85%; // 85% * 0.5
    margin-left: 25px; // 50px * 0.5
}
</style>
